<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/common/includes.jsp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>zzzzzz - Sign up</title>
	<%@ include file="/WEB-INF/common/meta.jsp" %>
	<link type="text/css" rel="stylesheet" href="${ctx}/res/css/main.css" />
	<script type="text/javascript" src="${ctx}/res/js/jquery/jquery-1.6.1.min.js"></script>
	<script type="text/javascript">
		var jq = jQuery.noConflict();
	</script>
	<script type="text/javascript" src="${ctx}/res/js/main.js"></script>
	<script type="text/javascript" src="${ctx}/res/js/signup_classic.js"></script>
</head>
<body>

<%@ include file="/WEB-INF/common/header.jsp" %>

<div class="site-wrap wrap">
	<div class="signup-wrap">
		<ul class="signup-section horizontal">
			<li class="form-wrap">
				<h1>Sign up</h1>
				<div class="form-section">
					<form:form id="user-signup-form" method="post" modelAttribute="registerVo" action="${ctx}/register" class="user-signup-form">
						<form:errors path="*" element="div" cssClass="msg-error"/>
						<div class="fieldset" style="overflow: auto; margin-bottom: 3px;">
							<label for="user-signup-email" id="user-signup-email-error-msg" class="user-signup-error-msg" style="display: none;"></label>
							<div style="clear: both; margin-top: 16px;">
								<label for="user-signup-email" class="triple-column column of-eight">Email <span class="required">*</span></label><form:input path="email" id="user-signup-email" data-explaination-text="What's your email address?" tabindex="1" size="255" maxlength="255" class="quintuple-column column of-eight" />
							</div>
						</div>
						<div class="fieldset" style="overflow: auto; margin-bottom: 3px;">
							<label for="user-signup-username" id="user-signup-username-error-msg" class="user-signup-error-msg" style="display: none;"></label>
							<div style="clear: both; margin-top: 16px;">	
								<label for="user-signup-username" class="triple-column column of-eight">Username <span class="required">*</span></label><form:input path="username" id="user-signup-username" data-explaination-text="Choose a unique username, at least 3 characters" tabindex="2" size="20" maxlength="20" class="quintuple-column column of-eight" />
							</div>
						</div>
						<div class="fieldset" style="overflow: auto; margin-bottom: 3px;">
							<label for="user-signup-password" id="user-signup-password-error-msg" class="user-signup-error-msg" style="display: none;"></label>
							<div style="clear: both; margin-top: 16px;">
								<label for="user-signup-password" class="triple-column column of-eight">Password <span class="required">*</span></label><form:password path="password" id="user-signup-password" data-explaination-text="At least 6 characters" tabindex="3" size="20" maxlength="20" class="quintuple-column column of-eight" />
							</div>
						</div>
						<div class="fieldset" style="overflow: auto;">
							<label for="user-terms-of-service" id="user-terms-of-service-error-msg" class="user-signup-error-msg" style="display: none;"></label>
							<div style="clear: both; margin-top: 16px;">
								<span class="triple-column column of-eight"></span><div class="quintuple-column column of-eight"><div class="user-terms-of-service"><input type="checkbox" id="user-terms-of-service" name="user-terms-of-service" tabindex="4" value=""/><label for="user-terms-of-service"> I accept the <a href="${ctx}/terms_of_service" target="_blank">terms of service</a></label></div></div>
							</div>
						</div>
						<div class="fieldset">
							<span class="triple-column column of-eight"></span><div class="quintuple-column column of-eight"><input type="submit" id="user-signup-submit" tabindex="5" name="user-signup-submit" value="Sign Up!" class="style2-button large-button button" /><span id="user-signup-submit-status" class="user-signup-submit-status"></span></div>
						</div>
						<span class="triple-column column of-eight"></span><span class="quintuple-column column of-eight">Already have an account?  <a href="${ctx}/login">Log in</a></span>
					</form:form>
				</div>
			</li>
			<li class="social-wrap">
				<h1 style="margin-top: 100px;">Sign up using your<br/>existing social network</h1>
			</li>
		</ul>
	</div>
	
	<span id="user-signup-tip-bubble" style="display: none;" class="user-signup-tip-bubble"><b><b class="triangle-border-bg"></b></b><span id="user-signup-tip"></span></span>
</div>

<script type="text/javascript">

var signupClassic = new SignupClassic({
	'j_user_signup_tip_bubble' : jq("#user-signup-tip-bubble"),
	'j_user_signup_tip' : jq("#user-signup-tip"),
	'j_user_signup_form' : jq("#user-signup-form"),
	'j_user_signup_email' : jq("#user-signup-email"),
	'j_user_signup_username' : jq("#user-signup-username"),
	'j_user_signup_password' : jq("#user-signup-password"),
	'j_user_terms_of_service' : jq("#user-terms-of-service"),
	'j_user_signup_email_error_msg' : jq("#user-signup-email-error-msg"),
	'j_user_signup_username_error_msg' : jq("#user-signup-username-error-msg"),
	'j_user_signup_password_error_msg' : jq("#user-signup-password-error-msg"),
	'j_user_terms_of_service_error_msg' : jq("#user-terms-of-service-error-msg"),
	'j_user_signup_submit' : jq("#user-signup-submit"),
	'j_user_signup_submit_status' : jq("#user-signup-submit-status")
});

</script>

<%@ include file="/WEB-INF/common/footer.jsp" %>

</body>
</html>
